<!--vue模板-->
<template>
  <div>
    <div>
      <!-- 搜索 -->
      <div class="toolbar">
        <el-input
          v-model="querycode"
          placeholder="请输入订单编号"
          style="width: 200px; margin-right: 10px"
        />
        <el-button type="primary" @click="init">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </div>
      <!--按钮区-->
      <div class="toolbar">
        <el-button type="primary" @click="save">添加订单</el-button>
      </div>
      <!--表格数据-->
      <el-table
        :data="tableData"
        style="width: 100%"
        stripe
        border
        row-key="id"
      >
        <el-table-column
          label="序号"
          type="index"
          width="80"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="code"
          label="订单编号"
          width="180"
          header-align="center"
        />
        <el-table-column prop="cname" label="客户名称" header-align="center" />
        <el-table-column
          prop="end"
          label="目的地"
          width="180"
          header-align="center"
        />
        <el-table-column
          prop="product"
          label="产品"
          width="150"
          header-align="center"
        />
        <el-table-column
          prop="price"
          label="费用"
          width="150"
          header-align="center"
        />
        <el-table-column
          prop="num"
          label="数量"
          width="100"
          header-align="center"
        />
        <el-table-column
          prop="account"
          label="销售"
          width="100"
          header-align="center"
        />
        <el-table-column
          prop="endtime"
          label="最晚抵达日期时间"
          width="150"
          header-align="center"
        />

        <el-table-column
          label="状态"
          width="180"
          header-align="center"
          align="center"
        >
          <template #default="{ row }">
            <div v-if="row.status == null">签约中</div>
            <div v-if="row.status == 0">
              未采购
              <el-button
                type="primary"
                size="small"
                @click="goprocurement(row.code, row.product, row.status)"
                >采购</el-button
              >
            </div>
            <div v-if="row.status == 1">备货中</div>

            <div v-if="row.status == 2">
              等待运输
              <el-button
                type="primary"
                size="small"
                @click="gohuo(row.code, row.status)"
                >联系货代</el-button
              >
            </div>
            <div v-if="row.status == 3">运输中</div>
            <div v-if="row.status == 4">完成</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Procurement
      ref="procurement"
      :visible="isShow"
      @close="isShow = false"
      @refresh="init()"
    />
    <Huo
      ref="huo"
      :visible="isShow2"
      @close="isShow2 = false"
      @refresh="init()"
    />
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { query } from "@/api/order";
import { useRouter } from "vue-router";
import Procurement from "./Procurement.vue";
import Huo from "./Huo.vue";
const router = useRouter();
//表格数据
const tableData = ref([]);
const procurement = ref(null);
const huo = ref(null);
//是否显示新增用户
const isShow = ref(false);
const isShow2 = ref(false);
const querycode = ref("");

function reset() {
  querycode.value = "";
  init();
}

function goprocurement(code, product, status) {
  isShow.value = true;
  procurement.value.init(code, product, status);
}
function gohuo(code, status) {
  isShow2.value = true;
  huo.value.init(code, status);
}

//新增部门
function save() {
  router.push("/order/createorder");
}

//方法
async function init() {
  let params = {
    code: querycode.value,
    endtime: "",
    cname: "",
    price: "",
    product: "",
    num: "",
    status: "",
    saleid: "",
    end: ""
  };
  console.log(params);

  let res = await query(params);
  if (res.code == 200) {
    tableData.value = res.data;
  }
}

async function chg(id, status) {
  let res = await changeDeptStatus(id, status);
  if (res.code == 200) {
    ElMessage({
      message: "修改成功",
      type: "success"
    });
    init(); //重新查询数据
  }
}

//生命周期钩子
onBeforeMount(() => {
  init();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.toolbar {
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  padding-left: 20px;
}
</style>
